<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>top-bar - demo</title>
    <style>
        html, body {
            margin: 0px;
            padding: 0px;
        }
        body {
            /* padding-top: 60px; */
        }

        .top-bar {
            /* 基础样式 */
            background-color:cornflowerblue;
            font-size: larger;
            color: #fff;
            padding: 15px 0px;
            width: 100%;
            text-align: center;
            /* End */

            position: sticky;
            top: 0px;
            opacity: 0.9;

        }
        .content {
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="top-bar">
        <div>牛仔很忙</div>
        <div>牛仔很忙</div>
        <div>牛仔很忙</div>
        <div>牛仔很忙</div>
        <div>牛仔很忙</div>
    </div>

    <div class="content">
        <p>呜啦啦啦火车笛 随着奔腾的马蹄</p>
        <p>小妹妹吹着口琴 夕阳下美了剪影</p>
        <p>我用子弹写日记 介绍完了风景</p>
        <p>接下来换介绍我自己</p>
        <p>我虽然是个牛仔 在酒吧只点牛奶</p>
        <p>为什么不喝啤酒 因为啤酒伤身体</p>
        <p>很多人不长眼睛 嚣张都靠武器</p>
        <p>赤手空拳就缩成蚂蚁</p>
        <p>不用麻烦了 不用麻烦了</p>
        <p>不用麻烦 不用麻烦了 不用麻烦了</p>
        <p>你们一起上 我在赶时间</p>
        <p>每天决斗观众都累了 英雄也累了</p>
        <p>不用麻烦了 不用麻烦了</p>
        <p>副歌不长你们有几个 一起上好了</p>
        <p>正义呼唤我 美女需要我</p>
        <p>牛仔很忙的</p>
        <p>我啦啦啦骑毛驴 因为马跨不上去</p>
        <p>洗澡都洗泡泡浴 因为可以玩玩具</p>
        <p>我有颗善良的心 都只穿假牛皮</p>
        <p>喔跌倒时尽量不压草皮</p>
        <p>枪口它没长眼睛 我曾经答应上帝</p>
        <p>除非是万不得已 我尽量射橡皮筋</p>
        <p>老板先来杯奶昔 要逃命前请你</p>
        <p>顺便喂喂我那只小毛驴</p>
        <p>不用麻烦了 不用麻烦了</p>
        <p>不用麻烦 不用麻烦了 不用麻烦了</p>
        <p>你们一起上 我在赶时间</p>
        <p>每天决斗观众都累了 英雄也累了</p>
        <p>不用麻烦了 不用麻烦了</p>
        <p>副歌不长你们有几个 一起上好了</p>
        <p>正义呼唤我 美女需要我</p>
        <p>牛仔很忙的</p>
        <p>不用麻烦了 不用麻烦了</p>
        <p>不用麻烦 不用麻烦了 不用麻烦了</p>
        <p>你们一起上 我在赶时间</p>
        <p>每天决斗观众都累了 英雄也累了</p>
        <p>不用麻烦了 不用麻烦了</p>
        <p>副歌不长你们有几个 一起上好了</p>
        <p>正义呼唤我 美女需要我</p>
        <p>牛仔很忙的</p>
    </div>

    <!-- <script>
        document.body.style.paddingTop = document.querySelector('.top-bar').clientHeight + "px";
    </script> -->
</body>
</html>